<style scoped>
    #page-recharge .m-simpleHeader .ico{
        margin-top:.1rem;
        vertical-align: top;
        background: #ffffff;
    }
    .v-recharge{
        width:100%;
    }

    .v-recharge .v-recharge-intro{
        width:calc(100% - .24rem);
        padding:.12rem;
        font-size:.14rem;
    }

    .v-recharge .v-recharge-chargeMoney{
        width:calc(100% - .5rem);
        padding:0 .25rem;
    }

    .v-recharge-chargeMoney .v-recharge-chargeTitle{
        width:100%;
        padding:.15rem 0 0 0;
        font-size:.14rem;
        font-weight:bold;
    }

    .v-recharge-chargeMoney .chargeItem{
        width:100%;
        padding:.15rem 0;
        display: flex;
        flex-flow: wrap row;
        justify-content: space-between;
        align-items: center;
    }

    .v-recharge-chargeMoney .chargeItem .chargePrice{
        margin:.07rem 0;
        display: inline-block;
        height: .27rem;
        width:.92rem;
        border:.01rem solid #dedede;
        text-align: center;
        line-height:.27rem;
        font-size:.14rem;
        background: transparent;
    }

    .v-recharge-chooseType{
        height:.4rem;
        width:100%;
        padding-top:.1rem;
    }

    .v-recharge-chooseType .v-recharge-chooseTitle{
        width:calc(100% - .24rem);
        padding:0 .12rem;
        height:.4rem;
        line-height:.4rem;
        font-size:.14rem;
        font-weight:bold;
        border-bottom:.01rem solid #dedede;
    }

    .v-pay-submit{
        border:0;
        width:90.667%;
        height:.4rem;
        position: fixed;
        bottom:.15rem;
        left:50%;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
        -webkit-border-radius:.05rem;
        -moz-border-radius:.05rem;
        border-radius:.05rem;
        font-size:.15rem;
    }

    .v-pay-payType{
        font-size:.12rem;
        width:calc(100% - .24rem);
        padding:0 .12rem;
        height:.55rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
        border-bottom:1px solid #dedede;
    }

    .v-pay-payType label.v-radio{
        margin-left: auto;
        margin-right:0;
    }

    .v-pay-payType .payTypeImg{
        width:.3rem;
        height:auto;
    }

    .v-pay-payType .payType_explain{
        flex:2;
        margin-left:0.13rem;
        margin-right:auto;
        display: flex;
        justify-content: space-around;
        flex-direction: column;
    }

    .v-pay-payType .payType_explain li{
        flex:1;
    }

    .v-recharge-changeMoneyBorder{
        border:.01rem solid #ef3737 !important;
    }

</style>
<template>
    <div id="page-recharge" class="page-wrap">
        <header-component :page-name="pageName"></header-component>
        <div class="v-recharge background_12">
            <div class="v-recharge-intro background_9 color_6">
                充值金额用于购买众联拼宝的拼宝币(1元等于1拼宝币)，可以用于众联拼宝，充值的款项无法退回。
            </div>
            <div class="v-recharge-chargeMoney">
                <div class="v-recharge-chargeTitle color_6">充值金额</div>
                <div class="chargeItem">
                    <template v-for="(k,i) in priceList">
                        <label :for="i+'_price'" :class="['chargePrice','color_6', i==selectPrice?'v-recharge-changeMoneyBorder':'']" :data-val="i">{{i}}</label>
                        <input style="display: none" type="radio" :id="i+'_price'" v-model="selectPrice" name="chargePrice" :value="i" />
                    </template>
                    <input :class="['chargePrice','color_6',inputPrice?'v-recharge-changeMoneyBorder':'']" v-model="selectPrice" name="chargePrice" type="number" placeholder="其他金额" pattern="[0-9]*" data-val="" />
                </div>

            </div>
            <div class="v-recharge-chooseType background_9">
                <div class="v-recharge-chooseTitle background_12 color_5">
                    选择支付方式
                </div>
                <div class="v-pay-payType">
                    <img class="payTypeImg" src="../images/pay_weixin.png">
                    <div>
                        <ul class="payType_explain">
                            <li class="color_5">微信支付</li>
                            <li class="color_8">仅支持2元及以上金额</li>
                        </ul>
                    </div>
                    <label for="weixin" :class="['v-radio','background_1',payType=='recharge'?'':'uncheck']"></label>

                    <input type="radio" value="recharge" id="weixin" v-model="payType"  name="paytype">
                </div>
            </div>
            <button class="v-pay-submit background_13 color_12"  @click="recharge" id="rechargeBtn">马上充值</button>
        </div>
    </div>
    <pop :status-pop="statusPop" :status-toast="statusToast" :msg="msg" :delay="delay">
        <a href="javascript:;" @click="statusPop=false">确定</a>
    </pop>
</template>
<script>
    import pop from '../components/pop'
    import headerComponent from '../components/header'
    import User from '../module/user'
//    import Config from '../config/config'
    import Request from '../config/request'
    module.exports = {

        data() {

            return {
                pageName:'充值',
                payType:'recharge',
                selectPrice:10,
                inputPrice:false,
                priceList:[10,20,50,100,200],
                statusPop:false,

                statusToast:false,
                delay:2000,
                msg:''
            }
        },

        watch:{

            selectPrice(val){
                let flag=0;
                this.priceList.forEach((item)=>{
                    flag=item!=val?flag+1:flag;
                })

                if(flag<this.priceList.length){
                    this.inputPrice=false;
                }else{
                    this.inputPrice=true;
                }
            }
        },
        components: {
            pop,
            headerComponent
        },


        created(){

            this.$dispatch('isLoading', true);

        },
        ready() {
            this.$dispatch('isLoading', false);
        },

        beforeDestroy() {

        },
        methods: {
            async recharge(){
                if(!this.selectPrice||this.selectPrice<2){
                    this.statusPop=true;
                    this.msg='请输入大于等于2的金额';
                }else{
                    let res = await User.getOrder(this.payType,Number.parseInt(this.selectPrice));
                    if(res.status = 200){
                        window.location.href = Config.apiDomain + '/Pay/showPayPage?token=' + User.token + '&order=' + res.data.order;
                    }else{
                        this.statusPop=true;
                        this.msg=res.msg;
                    }
                }

            }
        }

    }
</script>
